<template>
  <div class="info-main" :style="{ width: infoWidth }">
    <!-- 标题 -->
    <span class="baseInfoHead">{{ infoTitle }}</span>

    <div class="form">
      <el-form
        label-position="left"
        @submit.native.prevent
      >
        <!-- 信息内容 -->
        <el-form-item
          v-for="(item, index) in infoData"
          :key="index"
          :label="item.label"
          class="infomation"
        >
          <span v-if="item.isTime">{{
            item.value | dataFormat('YYYY-MM-DD HH:mm')
          }}</span>
          <span v-else>{{ item.value }}</span>
        </el-form-item>
        <!-- 描述文本框 -->
        <el-form-item
          label="描述"
          v-if="isDescriptionTextAreaShow"
          class="descriptionTextArea"
        >
          <el-input
            type="textarea"
            v-model.trim="description"
            resize="none"
          ></el-input>
        </el-form-item>

        <!-- 信息内容 -->
        <div>
          <el-form-item
            v-for="(item, idx) in infoData2"
            :key="idx"
            :label="item.label"
            class="infomation"
          >
            <span>{{ item.value }}</span>
          </el-form-item>
        </div>
        <!-- tag显示行 -->
        <el-form-item label="标签" v-if="isTagShow">
          <span class="tagStyle">
            <div>
              <el-tag
                :key="tag"
                v-for="tag in tagList"
                closable
                :disable-transitions="false"
                @close="handleTagClose(tag)"
              >
                {{ tag }}
              </el-tag>
            </div>
            <el-input
              class="input-new-tag"
              v-model.trim="tagContext"
              size="small"
            >
              <el-button
                class="button-new-tag"
                size="small"
                @click="handleInputContent"
                slot="append"
                icon="el-icon-plus"
              >
              </el-button>
            </el-input>
          </span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    infoTitle: {
      default:'基本信息',
    },
    infoData:{
      default: ()=>[]
    },
    infoData2:{
      default:()=>[]
    },
    isDescriptionTextAreaShow: {
      default: false
    },
    descri:{
      default:''
    },
    isTagShow: {
      default: false
    },
    tag:{
      default: ()=>[]
    },
    infoWidth:{
      default: '31.25rem'
    }
  },
  
  data() {
    return {
        description: '',
        tagList: [],
        tagContext: '',
      }
  },
  created() {
    this.tagList = this.tag;
    this.description = this.descri;
  },
  methods: {
    // 标签删除事件
    handleTagClose(tag) {
      this.tagList = this.tagList.filter((item) => item != tag);
    },
    // 标签新增事件
    handleInputContent() {
      let iptValue = this.tagContext;
      if (iptValue && this.tagList.indexOf(iptValue) == -1) {
        this.tagList.push(iptValue);
      }
      this.tagContext = '';
    }
  },
}
</script>

<style lang="less" scoped>
.info-main {
  box-sizing: border-box;
  height: 510px;
  border: 1px solid #e6e6e6;
  padding: 30px 0 0px 30px;
  border-radius: 2px;
  .baseInfoHead {
    display: block;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: Bold;
    font-size: 16px;
    text-align: LEFT;
    color: #131416;
    margin-left: 11px;
    margin-bottom: 20px;
  }
  .el-form-item {
    margin-left: 10px;
  }
  .el-form-item__label {
    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
    font-weight: Normal;
    font-size: 14px;
    color: #808080;
    padding-right: 5px;
    text-align: left;
  }
  .el-form-item__content {
    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
    font-weight: Normal;
    font-size: 14px;
    color: #131416;
    margin-left: 90px !important;
  }
  .button-new-tag {
    text-align: center;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 2px;
    i {
      font-size: 10px;
    }
  }
  .el-textarea {
    margin-top: 10px;
    width: 320px;
    height: 100px;
    border-radius: 2px;
    font-size: 14px !important;
    .el-textarea__inner {
      width: 320px;
      height: 100px;
      border-radius: 2px;
    }
  }
  .tagStyle {
    height: 40px;
    .el-tag {
      box-sizing: border-box;
      margin: 10px 0 10px 10px;
      height: 22px;
      line-height: 20px;
      padding: 0 8px;
      background-color: #f8f8f8;
      border-color: #e6e6e6;
      border-radius: 2px;
      color: #333333;
      &:first-child {
        margin-left: 0;
      }
      .el-tag__close {
        color: #333333;
        width: 10px;
        &:hover {
          background-color: #f8f8f8;
        }
      }
    }
    .input-new-tag {
      width: 240px;
      height: 28px;
      border-radius: 1px;
      .el-input__inner {
        border-radius: 2px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      .el-input-group__append {
        width: 26px;
        padding: 0;
        text-align: center;
        border-radius: 2px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        background-color: #fff;
      }
      .button-new-tag {
        text-align: center;
        box-sizing: border-box;
        height: 30px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 2px;
        i {
          font-size: 10px;
        }
      }
    }
  }
}
</style>
